import { ref, watchEffect } from 'vue'

export function useMenuAnimation(items) {
  const animatedItems = ref([])

  watchEffect(() => {
    if (Array.isArray(items.value)) {
      animatedItems.value = items.value.map(item => ({
        ...item,
        isVisible: false
      }))
    }
  })

  const startAnimation = () => {
    animatedItems.value.forEach((item, index) => {
      setTimeout(() => {
        item.isVisible = true
      }, index * 100 + 150) // Added 150ms initial delay for smoother entrance
    })
  }

  const resetAnimation = () => {
    animatedItems.value.forEach(item => {
      item.isVisible = false
    })
  }

  return {
    animatedItems,
    startAnimation,
    resetAnimation
  }
}